<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
function checkNameAjax(){
	$.ajax({
		//发送请求的地址
		url:"CheckUserNameServlet",
		//请求方式，默认为get
		type:"post",
		//预期服务器返回的数据类型。如果不指定自动根据MIME类型返回信息
		dataType:"text",
		//发送到服务器的数据，与第26行可选
		data:{
			name:$("#name").val()
		},
		
		//请求成功后回调函数，参数为服务器返回的数据
		success:function(data){
			//将JSON文本转换为JavaScript对象
			var user = eval("("+ data + ")");	
			if(user != null){
				$("#nameError").html(user.name + "已经存在，请换一个名字！");
			}
		},
		//请求失败时调用的函数
		error:function(){
			alert("处理异常");
		}
	});
}
</script>
</head>
<body>

<h1>新增用户</h1>

<form action="DoAddServlet" method="post">
用户名：<input type="text" id="name" name="name" onblur="checkNameAjax()" ><span style="color:#ff0000" id="nameError"></span><br>
密码：<input type="text" name="password" ><br>
Email：<input type="text" name="email" ><br>
生日：<input type="text" name="birthday" ><br>
<input type="submit" value="新增">
</form>

<br>
<a href="GetUserListServlet">返回列表</a>

</body>
</html>